<template>
    <view>
        <view class="search_row">
            <input :value="inputValue" placeholder="请输入您要搜索的商品" @input="handleInput" />
            <button v-if="isFocus" size="mini" @click="handleCancel">取消</button>
        </view>

        <view class="search_content">
            <navigator class="search_item" :url="'/pages/goods_detail/main?goods_id=' + item.goods_id" v-for="(item, index) in goods" :key="item.goods_id">
                {{ item.goods_name }}
            </navigator>
        </view>
    </view>
</template>

<script>
/**
 * 1.输入框绑定  值改变事件  input事件
 *  1.获取到输入框的值
 *  2.合法性判断
 *  3.检验通过  把输入框的值  发送到后台
 *  4.返回的数据打印到页面上
 * 2.防抖（防止抖动）  定时器 节流
 *  1.防抖  一般 输入框中防止重复输入  重复发送请求
 *  2.节流 一般是用在页面下拉和上拉
 *  3.定义全局的定时器id
 */
import regeneratorRuntime from '../../lib/runtime/runtime'; // 支持es7的js文件引入1123

import { request } from '../../request/index.js';
export default {
    data() {
        return {
            goods: [],
            isFocus: false,
            inputValue: {}
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        TimeId: -1,

        // 输入框的值改变  就会触发的事件
        handleInput(e) {
            console.log(e); // 1.获取输入框的值

            const { value } = e.detail; // 2.检测合法性

            if (!value.trim()) {
                // 值不合法
                this.setData({
                    goods: [],
                    isFocus: false
                });
                return;
            }

            this.setData({
                isFocus: true
            }); // 3.准备发送请求获取数据
            // 防抖的设计

            clearTimeout(this.TimeId); // const _this = this
            // this.TimeId = setTimeout(function(){
            //   _this.reserch(value)
            // },1000)

            this.TimeId = setTimeout(() => {
                this.reserch(value);
            }, 1000);
        },

        // 点击取消按钮
        handleCancel() {
            this.setData({
                goods: [],
                isFocus: false,
                inputValue: ''
            });
        },

        async reserch(query) {
            const res = await request({
                url: '/goods/search',
                data: {
                    query
                }
            });
            console.log(res);
            this.setData({
                goods: res.goods
            });
            console.log(this.goods);
        }
    }
};
</script>
<style>
@import './index.css';
</style>
